<template>
  <div class="day-report">
    <el-card>
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        :rules="rules"
        v-show="showSearch"
        label-width="68px"
        :disabled="loading"
      >
        <el-form-item label="门店" prop="deptId">
          <el-select v-model="queryParams.deptId" placeholder="请选择门店">
            <el-option
              v-for="item in slectDeptOptions"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="班次" prop="classes">
        <el-select v-model="queryParams.classes" placeholder="请选择班次" clearable>
          <el-option
            v-for="item in dict.type.class"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item> -->
<!--        <el-form-item label="销售员" prop="userId">-->
<!--          <el-select v-model="queryParams.userId" placeholder="请选择销售员">-->
<!--            <el-option-->
<!--              v-for="item in slectUserOptions"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value"-->
<!--            >-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="日期" prop="staticsDate">
          <el-date-picker
            :clearable="false"
            v-model="queryParams.staticsDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >
            查询
          </el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">
            重置
          </el-button>
          <el-button
            icon="el-icon-printer"
            size="mini"
            type="primary"
            plain
            @click="printReport"
            :disabled="isNotData"
          >
            打印
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="report-content" ref="printCard" v-loading="loading">
      <el-empty v-if="isNotData" description="暂无数据"></el-empty>
      <el-card v-if="!isNotData" class="report-card">
        <div class="only-print">
          <h3 style="text-align: center">{{ deptName }} 日报表</h3>
          <div
            style="display: flex; justify-content: space-between; padding: 10px"
          >
            <div>日期：{{ reportData.queryParams.staticsDate }}</div>
            <div>销售员：{{ reportData.userName }}</div>
          </div>
        </div>
        <table>
          <tr class="report-table-title">
            <th>类型</th>
            <th>细分</th>
            <th colspan="3">班初</th>
            <th colspan="3">班末</th>
            <th colspan="3">班结</th>
            <th>合计</th>
            <th colspan="3">备注</th>
          </tr>
          <tr>
            <td rowspan="7">收入</td>
            <td>现金</td>
            <td colspan="3">{{ reportData.xjAmountStart || 0 }}</td>
            <td colspan="3">{{ reportData.xjAmountEnd || 0 }}</td>
            <td colspan="3">{{ reportData.xjAmountCount || 0 }}</td>
            <td rowspan="7">{{ reportData.srSum || 0 }}</td>
            <td colspan="3">店铺现金</td>
          </tr>
          <tr>
            <td>微信零钱</td>
            <td colspan="3">{{ reportData.vxAmountStart || 0 }}</td>
            <td colspan="3">{{ reportData.vxAmountEnd || 0 }}</td>
            <td colspan="3">{{ reportData.vxAmountCount || 0 }}</td>
            <td colspan="3">查零钱通</td>
          </tr>
          <tr>
            <td>收银通</td>
            <td colspan="3">{{ reportData.hskAmountStart || 0 }}</td>
            <td colspan="3">{{ reportData.hskAmountEnd || 0 }}</td>
            <td colspan="3">{{ reportData.hskAmountCount || 0 }}</td>
            <td colspan="3">查收银通</td>
          </tr>
          <!-- <tr>
            <td>数字人民币</td>
            <td colspan="2">{{ reportData.szRmbAmountStart || 0 }}</td>
            <td colspan="2">{{ reportData.szRmbAmountEnd || 0 }}</td>
            <td colspan="2">{{ reportData.szRmbAmountCount || 0 }}</td>
            <td colspan="2"></td>
          </tr> -->
          <tr>
            <td>彩银系统银行缴款</td>
            <td colspan="3">{{ reportData.ydPayAmountStart || 0 }}</td>
            <td colspan="3">{{ reportData.ydPaAmountEnd || 0 }}</td>
            <td colspan="3">{{ reportData.ydPaAmountCount || 0 }}</td>
            <td colspan="3">查电子缴款报表</td>
          </tr>
          <tr>
            <td>电彩兑奖</td>
            <td colspan="3">{{ reportData.dcConversionAmountStart || 0 }}</td>
            <td colspan="3">{{ reportData.dcConversionAmountEnd || 0 }}</td>
            <td colspan="3">{{ reportData.dcConversionAmountCount || 0 }}</td>
            <td colspan="3">查日报表</td>
          </tr>
          <tr>
            <td>即开兑奖</td>
            <td colspan="3">{{ reportData.jkConversionAmountStart || 0 }}</td>
            <td colspan="3">{{ reportData.jkConversionAmountEnd || 0 }}</td>
            <td colspan="3">{{ reportData.jkConversionAmountCount || 0 }}</td>
            <td colspan="3">查日报表</td>
          </tr>
          <!-- <tr>
            <td>费用支出</td>
            <td colspan="3">0</td>
            <td colspan="3">0</td>
            <td colspan="3">0</td>
            <td colspan="3">店铺支出</td>
          </tr> -->
          <tr>
            <td>备用金</td>
            <td colspan="3">{{ reportData.byjAmountStart || 0 }}</td>
            <td colspan="3">{{ reportData.byjAmountEnd || 0 }}</td>
            <td colspan="3">{{ reportData.byjAmountCount || 0 }}</td>
            <td colspan="3">当班新注入店铺资金</td>
          </tr>
          <tr>
            <td rowspan="2">销售</td>
            <td>电彩销售</td>
            <td colspan="3">{{ reportData.dcSaleAmountStart || 0 }}</td>
            <td colspan="3">{{ reportData.dcSaleAmountEnd || 0 }}</td>
            <td colspan="3">{{ reportData.dcSaleAmountCount || 0 }}</td>
            <td rowspan="2">{{ reportData.xsSum || 0 }}</td>
            <td rowspan="2">差异</td>
            <td rowspan="2" colspan="3">{{ reportData.cyAmount }}</td>
          </tr>
          <tr>
            <td>即开销售</td>
            <td colspan="3">{{ reportData.jkSaleAmountStart || 0 }}</td>
            <td colspan="3">{{ reportData.jkSaleAmountEnd || 0 }}</td>
            <td colspan="3">{{ reportData.jkSaleAmountCount || 0 }}</td>
            <td colspan="3"></td>
          </tr>
          <tr class="report-table-title">
            <th>即开明细</th>
            <th>单价</th>
            <th>班初包数</th>
            <th>班初张数</th>
            <th>班初金额</th>
            <th>入库包数</th>
            <th>入库张数</th>
            <th>入库金额</th>
            <th>班初总金额</th>
            <th>班末包数</th>
            <th>班末张数</th>
            <th>班末金额</th>
            <th>销售包数</th>
            <th>销售张数</th>
            <th>销售金额</th>
          </tr>
          <tr v-for="item in reportData.materialItemVOList" :key="item.materialId">
            <td>{{ item.materialName }}</td>
            <td>¥ {{ item.money||0 }}</td>
            <td>{{ item.startPackageCount||0 }}</td>
            <td>{{ item.startSheetCount||0 }}</td>
            <td>{{ item.startAmount||0 }}</td>
            <td>{{ item.joinPackageNum||0 }}</td>
            <td>{{ item.joinSheetNum||0 }}</td>
            <td>{{ item.joinAmount||0 }}</td>
            <td>{{ item.startSumAmount||0 }}</td>
            <td>{{ item.endPackageCount||0 }}</td>
            <td>{{ item.endSheetCount||0 }}</td>
            <td>{{ item.endAmount||0 }}</td>
            <td>{{ item.salePackageNum||0 }}</td>
            <td>{{ item.saleSheetNum||0 }}</td>
            <td>{{ item.saleAmount||0 }}</td>
          </tr>
          <tr>
            <th>合计</th>
            <th></th>
            <th>{{ sumData(reportData.materialItemVOList,'startPackageCount') }}</th>
            <th>{{ sumData(reportData.materialItemVOList,'startSheetCount') }}</th>
            <th>{{ sumData(reportData.materialItemVOList,'startAmount') }}</th>
            <th>{{ sumData(reportData.materialItemVOList,'joinPackageNum') }}</th>
            <th>{{ sumData(reportData.materialItemVOList,'joinSheetNum') }}</th>
            <th>{{ sumData(reportData.materialItemVOList,'joinAmount') }}</th>
            <th>{{ sumData(reportData.materialItemVOList,'startSumAmount') }}</th>
            <th>{{ sumData(reportData.materialItemVOList,'endPackageCount') }}</th>
            <th>{{ sumData(reportData.materialItemVOList,'endSheetCount') }}</th>
            <th>{{ sumData(reportData.materialItemVOList,'endAmount') }}</th>
            <th>{{ sumData(reportData.materialItemVOList,'salePackageNum') }}</th>
            <th>{{ sumData(reportData.materialItemVOList,'saleSheetNum') }}</th>
            <th>{{ sumData(reportData.materialItemVOList,'saleAmount') }}</th>
          </tr>
        </table>
        <div class="only-print" style="padding: 10px; line-height: 1.5">
          <div>制表说明:</div>
          <div>1、即开明细班初数量为前一班次的班末数量;</div>
          <div>2、即开明细入库数量为当天补货数量;</div>
          <div>3、即开明细班末数量为当班交接班时盘点数量。</div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { listDept } from "@/api/system/dept";
import { getSalesUserByUserName } from "@/api/system/user";
import { listDay } from "@/api/system/report";
import { toDateString } from "xe-utils";
import { VXETable } from 'vxe-table';
export default {
  dicts: ["class"],
  data() {
    return {
      loading: false,
      queryParams: {
        deptId: "",
        // classes: '',
        userId: "",
        staticsDate: toDateString(new Date(), "yyyy-M-d"),
      },
      rules: {
        deptId: [{ required: true, message: "请选择门店", trigger: "change" }],
        // classes: [{ required: true, message: "请选择班次", trigger: "change" }],
        // userId: [
        //   { required: true, message: "请选择销售员", trigger: "change" },
        // ],
        staticsDate: [
          { required: true, message: "请选择日期", trigger: "change" },
        ],
      },
      showSearch: true,
      slectDeptOptions: [],
      slectUserOptions: [],
      reportData: {
        queryParams:{}
      },
    };
  },
  computed: {
    isNotData() {
      return !this.reportData || !this.reportData.queryParams.staticsDate;
    },
    deptName() {
      return this.slectDeptOptions.find(
        (v) => v.deptId === this.reportData.queryParams.deptId
      )?.deptName;
    },
    userName() {
      return this.slectUserOptions.find(
        (v) => v.value === this.reportData.queryParams.userId
      )?.label;
    },
  },
  created() {
    this.getInitData();
  },
  methods: {
    // 合计
    sumData(data, key) {
      return data.reduce((prev, cur) => {
        return prev + (cur[key] ? Number(cur[key]):0);
      }, 0);
    },
    getInitData() {
      this.getDeptList();
      this.getUserList();
    },
    getDeptList() {
      listDept({ parentId: 100 }).then((response) => {
        this.slectDeptOptions = response.data;
      });
    },
    getUserList() {
      getSalesUserByUserName({}).then((response) => {
        this.slectUserOptions = response.data;
      });
    },
    // 查询
    handleQuery() {
      this.$refs.queryForm.validate((valid) => {
        if (valid) {
          this.getReportData();
        }
      });
    },
    // 重置
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.reportData = {
        queryParams:{}
      }
    },
    getReportData() {
      this.loading = true;
      listDay(this.queryParams).then((response) => {
        this.reportData = {
          queryParams: {...this.queryParams},
          ...response.data
        };
      }).finally(() => {
        this.loading = false;
      })
    },
    // 打印
    printReport() {
      const html = this.$refs.printCard.innerHTML
      console.log(html);
      VXETable.print({
        content: html,
        sheetName: `${this.deptName} 日报表`,
        style: `
          .report-card h3 {
            font-size: 1.17em;
            margin-block-start: 1em;
            margin-block-end: 1em;
            font-weight: 500;
            line-height: 1.1;
          }
          .report-card {
            min-width: 800px;
            width: 100%;
          }
          .report-card table {
            width: 100%;
            border-top: 1px solid #ebeef5;
            border-left: 1px solid #ebeef5;
            border-spacing: 0;
          }
          .report-card table th,
          .report-card table td {
            border-right: 1px solid #ebeef5;
            border-bottom: 1px solid #ebeef5;
            text-align: center;
            padding: 10px 0;
          }
          .report-card table th {
            background: #f5f7fa;
            font-weight: bold;
            -webkit-print-color-adjust: exact;
          }`,
      })
    },
  },
};
</script>
<style lang="scss">
.day-report {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 84px);
}

  .report-content {
    flex: 1;
    overflow: auto;
    padding: 10px;
  }

  .report-card {
    max-width: 1487px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    min-width: 800px;
    .only-print {
      // display: none;
    }
    table {
      width: 100%;
      border-top: 1px solid #ebeef5;
      border-left: 1px solid #ebeef5;
      border-spacing: 0;

      th,
      td {
        border-right: 1px solid #ebeef5;
        border-bottom: 1px solid #ebeef5;
        text-align: center;
        padding: 10px 0;
      }

      th {
        background-color: #f5f7fa;
        font-weight: bold;
      }
    }
  }

</style>
